<template>
	<view>
		<view class="top">
			<image src="/static/image/bannerImg.png" @click="toUrl('/pages/index')" mode="widthFix"></image>
		</view>
		<view>
			<view class='right'>
				<view class="main">
					<view class="qrBox">
						<!-- <img  ></img> -->
						<image :src="loginCode"></image>
						<view class="mark" v-if="hideCode">请在App中授权登录</view>
						<view class="qrTip">请使用玺咖商城APP扫码登录</view>
						<view class="qrBtn">重新扫码</view>
						<view class="qrDown" @click='hiddenQrcode = false'>
							<image src="../../../static/image/common/logo.png"></image>玺咖商城APP下载
						</view>
					</view>
					<view class="loginBox" v-if="showType==0">
						<view class="box">
							<view class="tit" v-text="loginType==0?'账号登录':'验证码登录'"></view>
							<view class="inputBox">
								<view class="phone_left">+86</view>
								<view class="input">
									<u-input v-model="phone" placeholder='请输入手机号码' :height='80' />
								</view>
							</view>
							<view class="inputBox" v-if="loginType==0">
								<view class="password">
									<u-input v-model="password" type='password' placeholder='请输入密码' :height='80' />
								</view>

							</view>
							<view class="inputBox" v-if="loginType==1">
								<view class="code">
									<u-input v-model="code" placeholder='请输入6位验证码' :height='80' />
								</view>
								<view class="phone_right" @click="checkPhone"><text>{{btntxt}}</text></view>
							</view>
							<view class="tip">
								<image src="../../../static/image/common/check_on.png" v-if="check"
									@click=" check = false">
								</image>
								<image src="../../../static/image/common/check.png" v-else @click="show = true"></image>
								<view style="width: calc(100% - 20px);">
									我已阅读并同意
									<text>《{{infoList.title}}》</text>,
									并授权翼宝商城使用该账号信息(如昵称、头像)进行统一管理
								</view>
							</view>
							<view class="btnBox" @click="checkLogin">立即登录</view>
							<!-- <view class="chooseBox" @click="loginType = 1" v-if="loginType==0">验证码登录</view>
							<view class="chooseBox" @click="loginType = 0" v-else>密码登录登录</view> -->
							<!-- <view class="chooseText" @click="showClear = true " style="left: 25px !important;">账号注销</view> -->
							<view class="chooseText" @click="showType = 1">暂无账号？立即注册</view>
						</view>
					</view>
					<view class="loginBox" v-if="showType==1">
						<view class="box">
							<view class="tit" v-text="'用户注册'"></view>
							<view class="inputBox">
								<view class="phone_left">+86</view>
								<view class="input">
									<u-input v-model="phone" placeholder='请输入手机号码' :height='80' />
								</view>
							</view>
							<view class="inputBox">
								<view class="password">
									<u-input v-model="password" type='password' placeholder='请输入密码' :height='80' />
								</view>
							</view>
							<!-- <view class="inputBox">
								<view class="code">
									<u-input v-model="code" placeholder='请输入6位验证码' :height='80' />
								</view>
								<view class="phone_right" @click="checkPhone"><text>{{btntxt}}</text></view>
							</view> -->
							<view class="tip">
								<image src="../../../static/image/common/check_on.png" v-if="check"
									@click=" check = false">
								</image>
								<image src="../../../static/image/common/check.png" v-else @click="show = true"></image>
								<view style="width: calc(100% - 20px);" @click="show = true">
									我已阅读并同意
									<!-- <text v-for="(row,i) in infoList" :key="i">《{{row.title}}》</text>, -->
									<text >《{{infoList.title}}》</text>,
									并授权翼宝商城使用该账号信息(如昵称、头像)进行统一管理
								</view>

							</view>
							<view class="btnBox" @click="getReg">立即注册</view>

							<view class="chooseText" @click="showType = 0">已有账号，立即登录</view>
						</view>
					</view>
				</view>

			</view>
		</view>
		<u-popup v-model="show" mode="center">
			<view class='popBox'>
				<scroll-view :scroll-y="true" class="popScroll">
					<view class="info">
						<u-parse :html="showContent | formatRichText"></u-parse>
					</view>
				</scroll-view>
				<view class="btn" @click="read">同意</view>
			</view>
		</u-popup>
		<u-popup v-model="showClear" mode="center">
			<view class='popBox'>
				<scroll-view :scroll-y="true" class="popScroll">
					<view class="info">
						<text>
							<text style="font-size: 17px;font-weight: bold;width: 100%;">账号注销政策</text>
							<br></br>
							一、目的

							本政策旨在规定账号注销的相关事项，确保用户合法权益，维护平台秩序，以及提高用户体验。

							二、适用范围

							本政策适用于本平台所有用户。

							三、注销流程

							1. 用户自主注销：用户可以通过https://web.ynxkplay.com，在登录页面中找到“账号注销”选项，按照提示进行操作。
							2. 平台注销：平台可根据相关法律法规、政策规定或用户行为违规情况进行注销。具体包括但不限于以下情况：
							（1）违反法律法规：用户发布的消息或评论涉及违法、违规内容，如色情、暴力、恐怖主义、恶意攻击等。
							（2）侵犯他人权益：用户发布的消息或评论涉及侵犯他人隐私、肖像权、著作权等合法权益。
							（3）恶意行为：用户采取恶意手段干扰平台秩序，如发布虚假信息、刷单、恶意评论等。
							（4）违反平台规定：用户违反本平台的相关规定，如发布广告、恶意链接等。
							3. 注销程序：在注销账号前，平台将根据用户提供的联系方式进行通知确认，以确保注销操作的准确性。同时，平台将按照相关法律法规和政策规定对注销原因和操作结果进行公示。

							四、注意事项

							1. 账号注销后，该账号发布的内容将无法恢复，请用户在注销前谨慎考虑。
							2. 用户应自行备份账号信息，以免因注销操作造成不必要的损失。
							3. 平台保留对账号注销的最终解释权。如有任何疑问或争议，请联系平台客服进行处理。

							敬请广大用户遵守本政策规定，共同维护良好的平台环境。</text>
					</view>
				</scroll-view>
				<view class="btn" @click="clearBox = true , showClear = false">账号注销</view>
			</view>
		</u-popup>
		<u-popup v-model="clearBox" mode="center" :closeable='true'>
			<view class='popBox' style="height: 400px;width: 500px;">
				<view class="loginBox">
					<view class="box">
						<view class="tit">账号注销</view>
						<view class="inputBox">
							<view class="phone_left">+86</view>
							<view class="input">
								<u-input v-model="clearPhone" placeholder='请输入手机号码' :height='80' />
							</view>
						</view>
						<view class="inputBox">
							<view class="code">
								<u-input v-model="clearCode" placeholder='请输入6位验证码' :height='80' />
							</view>
							<view class="phone_right" @click="checkClaer"><text>{{clearBtntxt}}</text></view>
						</view>
						<view class="btnBox" @click="clear">立即注销</view>
					</view>
				</view>
			</view>
		</u-popup>
		<zw-dialog :hidden="hiddenQrcode" :title="'App下载'" :width="370" :height="400" @close="cancelPayment">
			<view class="qrcode-wrapper">
				<view class="qrcode-wrap">
					<image class="qrcode" src="../../../static/image/common/qrcode.png" mode="aspectFit"></image>

				</view>
				<view class="tips">
					<view>手机扫一扫</view>
					<view>下载App</view>
				</view>
			</view>
		</zw-dialog>
	</view>
</template>

<script>
	import {
		setAccToken,
		setRefToken,
		getRefToken
	} from '../../../userToken.js'
	import {
		encryptBase64,
		encryptWithAes,
		generateAesKey,
		decryptWithAes,
		decryptBase64
	} from '@/utils/crypto';
	import {
		encrypt,
		decrypt
	} from '@/utils/jsencrypt';
	export default {
		data() {
			return {
				show: false,
				clearPhone: '',
				clearCode: '',
				phone: '',
				password: '',
				code: '',
				infoList: '',
				check: false,
				showContent: '',
				btntxt: '获取验证码',
				seconds: 60,
				disabled: false,
				loginType: 0, //0密码登录 1验证码登录
				showType: 0, //0登录1注册
				timer: null,
				claerTimer: null,
				showClear: false,
				clearText: '',
				clearBox: false,
				clearBtntxt: '获取验证码',
				clearSeconds: 60,
				loginCode: '',
				uuid: '',
				msgData: {},
				hideCode:false,
				hiddenQrcode: true
			}
		},
		onLoad(e) {
			this.getInfoList()
			this.init()
			
		},
		methods: {
			init(){
				uni.request({
					url: this.serverUrl + '/user/information/list',
					method: 'GET',
					header: {
						'webuuid': encrypt(this.pageTenantId)
					},
					success: (res) => {
						if (res.data.code == 0 || res.data.code == 200) {
							var footerInfo = res.data.data[0]
							uni.setStorageSync('footerInfo', footerInfo)
						} 
					}
				})
			},
			//获取注销账号验证码
			checkClaer() {
				var that = this;

				if (!that.clearPhone) {
					uni.showToast({
						title: '请填写手机号码',
						icon: "none"
					});
					return false;
				}
				if (!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(that.clearPhone))) {
					uni.showToast({
						title: '请填写正确手机号码',
						icon: "none"
					});
					return false;
				}
				uni.showLoading({
					mask: true,
					title: '验证码发送中'
				})
				setTimeout(function() {
					uni.hideLoading();
					uni.showToast({
						title: '验证码已发送',
						icon: "none"
					});
				}, 800);


			},

			toUrl(url) {
				uni.navigateTo({
					url: url
				})
			},
			read() {
				this.check = true;
				this.show = false;
			},
			//检验登录方式
			checkLogin() {
				if (!this.check) {
					this.show = true;
					return
				}
				if (this.loginType == 0) {
					this.getPwdLogin()
				} else {
					this.getCodeLogin()
				}
			},
			//发送验证码
			checkPhone() {
				var that = this;
				if (!that.check) {
					that.show = true;
					return;
				}
				if (that.disabled) {
					return
				}
				if (!that.phone) {
					uni.showToast({
						title: '请填写手机号码',
						icon: "none"
					});
					return false;
				}
				if (!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(that.phone))) {
					uni.showToast({
						title: '请填写正确手机号码',
						icon: "none"
					});
					return false;
				}
				uni.showLoading({
					mask: true,
					title: '验证码发送中'
				})
				var url = that.serverUrl + "/user/userLogin/getValidateCode";
				if (that.showType == 1) {
					url = that.serverUrl + "/user/validateCode/getRegisterValidateCode"
				}
				uni.request({
					url: url,
					method: 'POST',
					data: {
						phone: that.phone
					},
					success: (res) => {
						uni.hideLoading()
						if (res.data.code == 0 || res.data.code == 200) {
							if (that.phone) {
								uni.showToast({
									title: '验证码已发送',
									icon: "none"
								});
								that.btntxt = that.seconds + '秒后再试';
								that.seconds--;
								that.disabled = true;
								that.timer = setInterval(() => {
									that.btntxt = that.seconds + '秒后再试';
									that.seconds--;
									that.disabled = true;
									if (that.seconds === 0) {
										clearInterval(that.timer);
										that.btntxt = '获取验证码';
										that.seconds = 60;
										that.disabled = false;
									}
								}, 1000);

							}
						} else {
							uni.showToast({
								title: res.data.msg,
								icon: 'none'
							})
						}
					}
				})
			},
			//密码登录
			getPwdLogin() {
				if (!this.phone) {
					uni.showToast({
						title: '请填写手机号码',
						icon: "none"
					});
					return false;
				}
				if (!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.phone))) {
					uni.showToast({
						title: '请填写正确手机号码',
						icon: "none"
					});
					return false;
				}
				if (!this.password) {
					uni.showToast({
						icon: 'none',
						title: '请填写密码'
					})
					return false;
				}
				
				const aesKey = generateAesKey();
				var data = {
					tenantId:this.pageTenantId,
					username:this.phone,
					password:this.password,
					clientId:"383c41953b35476defd109ac92a82ad6",
					grantType:"password"
				};
				uni.showLoading({
					title: '登录中',
					mask: true
				})
				uni.request({
					url: this.serverUrl + "/auth/loginPc",
					data: data,
					method: 'POST',
					header: {
						'isencrypt': true,
						'content-language':'zh_CN'
					},
					success: (res) => {
						if (res.data.code == 0 || res.data.code == 200) {
							uni.showToast({
								title: '登录成功',
								icon: "none"
							})
							setAccToken(res.data.data.access_token)
							setRefToken(res.data.data.refreshToken)
							var userInfo = res.data.data;
							var that = this;
							uni.setStorageSync('userInfo', userInfo)
							this.getUserInfoUpd()
							setTimeout(function() {
								uni.hideLoading();
								// that.exit()
								uni.reLaunch({
									url: '/pages/index'
								});
							}, 500);

						} else {
							uni.hideLoading();
							uni.showToast({
								title: res.data.msg,
								icon: 'none'
							})
						}
					}
				})
			},
			//注册
			getReg() {
				if (!this.phone) {
					uni.showToast({
						title: '请填写手机号码',
						icon: "none"
					});
					return false;
				}
				if (!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.phone))) {
					uni.showToast({
						title: '请填写正确手机号码',
						icon: "none"
					});
					return false;
				}
				if (!this.password) {
					uni.showToast({
						icon: 'none',
						title: '请填写密码'
					})
					return false;
				}
				uni.request({
					url: this.serverUrl + "/auth/register",
					data: {
						username: this.phone,
						// validateCode: this.code,
						password: this.password,
						clientId:"383c41953b35476defd109ac92a82ad6",
						tenantId:this.pageTenantId,
						grantType:"web_user"
					},
					method: 'POST',
					success: (res) => {
						if (res.data.code == 0 || res.data.code == 200) {
							uni.showToast({
								title: '注册成功',
								icon: "none"
							})
							this.password = ''
							this.code = ''
							clearInterval(that.timer);
							this.btntxt = '获取验证码';
							this.seconds = 60;
							this.disabled = false;
						} else {
							uni.showToast({
								title: res.data.msg,
								icon: 'none'
							})
						}
					},
					fail(e) {
						console.log(e)
					}
				})
			},
			getNum() {
				this.uni_request({
					url: '/user/cart/number',
					method: 'POST',
					success: (res) => {
						if (res.data.code == 0 || res.data.code == 200) {
							this.resetSetItem('sellerCartNum', res.data.data);
						} else {
							uni.showToast({
								icon: "none",
								title: res.data.msg
							})
						}
					}
				})
			},
			getUserInfoUpd() {
				var userInfoUpd = {}
				this.uni_request({
					url: '/user/info',
					method: 'GET',
					success: (res) => {
						if (res.data.code == 0 || res.data.code == 200) {
							userInfoUpd.nickName = res.data.data.nickName;
							userInfoUpd.headImg = res.data.data.headImg;
							uni.setStorageSync('userInfo', res.data.data)
							this.resetSetItemUser('userInfoUpd', JSON.stringify(userInfoUpd));
						} else {
							uni.showToast({
								icon: "none",
								title: res.data.msg
							})
						}
					}
				})
				
			},
			//验证码登录
			getCodeLogin() {
				uni.showLoading({
					title: '登录中',
					mask: true
				})
				uni.request({
					url: this.serverUrl + "/user/userLogin/login",
					data: {
						phone: this.phone,
						validateCode: this.code
					},
					method: 'POST',
					success: (res) => {
						if (res.data.code == 0 || res.data.code == 200) {
							uni.showToast({
								title: '登录成功',
								icon: "none"
							})
							this.getNum()
							this.getUserInfoUpd()
							setAccToken(res.data.data.access_token)
							setRefToken(res.data.data.refreshToken)
							var userInfo = res.data.data;
							var that = this;
							
							setTimeout(function() {
								uni.hideLoading();
								// that.exit()
								uni.reLaunch({
									url: '/pages/index'
								});
							}, 500);

						} else {
							uni.hideLoading();
							uni.showToast({
								title: res.data.msg,
								icon: 'none'
							})
						}
					}
				})
			},


			// loginSuccess(loginUser) {
			// 	this.$store.commit('login', loginUser);
			// 	this.$cart.syncCart();

			// 	uni.redirectTo({
			// 		url: this.callbackUrl || '/pages/index'
			// 	});
			// }

			getInfoList() {
				uni.request({
					url: this.serverUrl + '/articles/userAgreement',
					method: 'Get',
					header:{
						'webuuid': encrypt(this.pageTenantId)
					},
					success: (res) => {
						if (res.data.code == 200 || res.data.code == 0) {
							this.infoList = res.data.data[0];
							this.showContent = this.infoList.content;
						} else {
							uni.showToast({
								icon: 'none',
								title: res.data.msg
							})
						}
					}
				})

			},



		},
		filters: {
			/**
			 * 处理富文本里的图片宽度自适应
			 * 1.去掉img标签里的style、width、height属性
			 * 2.img标签添加style属性：max-width:100%;height:auto
			 * 3.修改所有style里的width属性为max-width:100%
			 * 4.去掉<br/>标签
			 * @param html
			 * @returns {void|string|*}
			 */
			formatRichText(html) {
				if (!html) return;
				//控制图片大小
				let newContent = html.replace(/<img[^>]*>/gi, function(match, capture) {
					match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '');
					match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '');
					match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '');
					return match;
				});
				newContent = newContent.replace(/style="[^"]+"/gi, function(match, capture) {
					match = match.replace(/width:[^;]+;/gi, 'max-width:100%;').replace(/width:[^;]+;/gi,
						'max-width:100%;');
					return match;
				});
				newContent = newContent.replace(/<br[^>]*\/>/gi, '');
				newContent = newContent.replace(/\<img/gi,
					'<img style="max-width:100%;height:auto;display:block;margin:10rpx auto;"');
				return newContent;
			}
		}
	}
</script>

<style lang="scss">
	.qrBox {
		height: 410px;
		position: absolute;
		z-index: 9;
		border-radius: 5px 0 0 5px;
		width: 300px;
		padding: 0 20px;
		top: 100px;
		display: flex;
		align-items: center;
		flex-direction: column;
		justify-content: center;
		right: 650px;
		background: #fff;

		image {
			width: 300px !important;
			height: 200px;
		}

		.mark {
			height: 200px;
			width: 200px;
			background: rgba(255, 255, 255, 0.9);
			position: absolute;
			top: 55px;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.qrTip {
			color: #717171;
			margin: 10px 0;
		}

		.qrBtn {
			color: #717171;
			margin-bottom: 10px;
			cursor: pointer;
		}

		.qrDown {
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 5px;
			width: 200px;
			cursor: pointer;
			background: rgb(245, 245, 245);

			image {
				width: 25px !important;
				height: 25px;
				border-radius: 5px;
				margin-right: 5px;
			}
		}

		.qrBtn:hover {
			color: #e93323;
		}

		.qrDown:hover {
			color: #e93323;
		}
	}

	.popBox {
		height: 80vh;
		width: 800px;
		padding: 10px;
		@extend %flex-align-center;
		flex-direction: column;

		.popScroll {
			height: 660px;
		}

		.info {
			display: inline-block;
			padding: 20px;
		}

		.btn {
			width: 150px;
			background: #e93323;
			color: #fff;
			@extend %flex-align-center;
			justify-content: center;
			height: 40px;
			margin-top: 12px;
			border-radius: 5px;
			font-size: 16px;
			cursor: pointer;
		}

		.loginBox {
			height: 400px;
			z-index: 9;
			border-radius: 5px;
			width: 490px;
			background: #fff;

			.box {
				.tit {
					@extend %flex-align-center;
					justify-content: center;
					margin: 70px 0 30px 0;
					font-size: 20px;
				}

				.inputBox {
					@extend %flex-align-center;
					justify-content: center;
					border: 1px solid #ddd;
					width: 400px;
					margin: 0 auto;
					height: 48px;
					margin-bottom: 20px;

					.phone_left {
						width: 70px;
						height: 48px;
						@extend %flex-align-center;
						justify-content: center;
						border-right: 1px solid #ddd;
						color: #717171;
					}

					.input {
						width: 330px;
						height: 48px;
						@extend %flex-align-center;
						justify-content: center;
						padding: 0 15px;
					}

					.phone_right {
						width: 150px;
						;
						height: 48px;
						@extend %flex-align-center;
						justify-content: center;
						border-left: 1px solid #ddd;
						color: #e93323;

						text {
							cursor: pointer;
						}
					}

					.password {
						width: 360px;
						height: 48px;
						@extend %flex-align-center;
						justify-content: center;
					}

					.code {
						width: 250px;
						@extend %flex-align-center;
						justify-content: center;
						padding: 0 15px;
					}
				}

				.tip {
					width: 400px;
					margin: 0 auto;
					color: #999;
					display: flex;
					align-items: flex-start;

					image {
						width: 15px;
						height: 15px;
						margin-right: 3px;
						margin-top: 2px;
						cursor: pointer;
					}

					text {
						color: #e93323;
						cursor: pointer;
					}
				}

				.btnBox {
					height: 50px;
					text-align: center;
					margin: 24px auto;
					color: #fff;
					cursor: pointer;
					font-size: 16px;
					background: #e93323;
					width: 400px;
					@extend %flex-align-center;
					justify-content: center;
					letter-spacing: 1px;
				}

				.chooseBox {
					text-align: center;
					margin: 24px auto;
					color: #e93323;
					cursor: pointer;
				}

				.chooseText {
					position: absolute;
					right: 15px;
					bottom: 15px;

					cursor: pointer;
					font-size: 13px;
					color: #717171;
				}

				.chooseText:hover {
					color: #e93323;
				}
			}
		}
	}

	.top {
		max-width: $page-width;
		min-width: $page-minwidth;

		margin: 0 8vw;
		height: 115px;
		display: flex;
		@extend %flex-align-center;
		justify-content: flex-start;

		image {
			width: 100px;
			cursor: pointer;
		}

		text {
			margin-left: 20px;
			font-size: 22px;
			font-weight: 600;
			cursor: pointer;
		}
	}

	.main {
		width: 100%;
		position: relative;
		height: 650px;
		overflow: hidden;

		image {
			width: 100%;
		}

		.loginBox {
			height: 410px;
			position: absolute;
			z-index: 9;
			border-radius: 10px;
			width: 500px;
			top: 100px;
			right: 200px;
			background: #fff;

			.box {
				.tit {
					@extend %flex-align-center;
					justify-content: center;
					margin: 30px 0 30px 0;
					font-size: 20px;
				}

				.inputBox {
					@extend %flex-align-center;
					justify-content: center;
					border: 1px solid #ddd;
					width: 400px;
					margin: 0 auto;
					height: 40px;
					margin-bottom: 20px;

					.phone_left {
						width: 70px;
						height: 40px;
						@extend %flex-align-center;
						justify-content: center;
						border-right: 1px solid #ddd;
						color: #717171;
					}

					.input {
						width: 330px;
						height: 40px;
						@extend %flex-align-center;
						justify-content: center;
						padding: 0 15px;
					}

					.phone_right {
						width: 150px;
						height: 40px;
						@extend %flex-align-center;
						justify-content: center;
						border-left: 1px solid #ddd;
						color: #e93323;

						text {
							cursor: pointer;
						}
					}

					.password {
						width: 360px;
						height: 40px;
						@extend %flex-align-center;
						justify-content: center;
					}

					.code {
						width: 250px;
						@extend %flex-align-center;
						justify-content: center;
						padding: 0 15px;
					}
				}

				.tip {
					width: 400px;
					margin: 0 auto;
					color: #999;
					display: flex;
					align-items: flex-start;

					image {
						width: 15px;
						height: 15px;
						margin-right: 3px;
						margin-top: 2px;
						cursor: pointer;
					}

					text {
						color: #e93323;
						cursor: pointer;
					}
				}

				.btnBox {
					height: 40px;
					text-align: center;
					margin: 15px auto;
					color: #fff;
					cursor: pointer;
					font-size: 16px;
					background: #e93323;
					width: 400px;
					@extend %flex-align-center;
					justify-content: center;
					letter-spacing: 1px;
				}

				.chooseBox {
					text-align: center;
					margin: 15px auto;
					color: #e93323;
					cursor: pointer;
				}

				.chooseText {
					position: absolute;
					bottom: 15px;
					right: 25px;
					cursor: pointer;
					font-size: 13px;
					color: #717171;
				}

				.chooseText:hover {
					color: #e93323;
				}
			}
		}
	}

	.qrcode-wrapper {
		width: 100%;

		.qrcode-wrap {
			width: 290px;
			height: 290px;
			position: relative;
			margin: 30px auto 10px;

			.qrcode {
				width: 100%;
				height: 100%;
			}

			.logo-wrap {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				width: 45px;
				height: 45px;
				background-color: $bg-color;
				padding: 3px;
				border-radius: 10px;
				box-shadow: 0 0 5px $bg-color;

				.logo {
					width: 100%;
					height: 100%;
				}
			}
		}

		.tips {
			margin-bottom: 10px;
			color: $text-color;
			text-align: center;

			.platform {
				color: $color-primary;
				margin: 0 5px;
			}
		}
	}
</style>